import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'inspection-index',
  styleUrls: ['./components.less'],
  template: `
        <div class="inspectionIndexContainer">
            <nz-tabset>
                <nz-tab nzTitle='巡检计划执行情况查看'>
                  <form [formGroup]='index_form'>
                    <nz-form-item>
                      <nz-form-label>线路</nz-form-label>
                      <nz-form-control>
                        <nz-select  nzPlaceHolder="请选择" formControlName="line">
                          <nz-option nzLabel="一号线" nzValue="1"></nz-option>
                          <nz-option nzLabel="二号线" nzValue="2"></nz-option>
                          <nz-option nzLabel="三号线" nzValue="3"></nz-option>
                        </nz-select>
                      </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                      <nz-form-label>选择日期</nz-form-label>
                      <nz-form-control>
                        <nz-date-picker formControlName="date"></nz-date-picker>
                      </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                      <nz-form-label>周期</nz-form-label>
                      <nz-form-control>
                        <nz-radio-group formControlName="cycle">
                          <label nz-radio nzValue="day">日</label>
                          <label nz-radio nzValue="mouth">月</label>
                          <label nz-radio nzValue="week">周</label>
                          <label nz-radio nzValue="year">年</label>
                        </nz-radio-group>
                      </nz-form-control>
                    </nz-form-item>
                    <button nz-button nzType='primary' (click)='indexFormSubmit()'>查询</button>
                  </form>

                  <div class="indexContent">
                      <div>
                          <span>全部巡检计划:</span><span>100</span>
                      </div>
                      <div>
                          <span>已完成巡检计划:</span><span>60(正常<span>55</span>/<span style="color:'#D9001B'">异常5</span>)</span>
                      </div>  
                      <div>
                          <span>未正常完成巡检计划:</span><span style="color:'#D9001B'">5</span>
                      </div>  
                      <div>
                          <span>待完成巡检计划:</span><span>35</span>
                      </div>  
                     
                  </div>
                </nz-tab>
                <nz-tab nzTitle='巡检异常统计'>
                  <nz-tabset>
                    <nz-tab nzTitle='按站点'>
                      <div echarts [options]="option1" class='inspection-echart'></div>
                    </nz-tab>
                    <nz-tab nzTitle='按时间'>
                      <div echarts [options]="option2" class='inspection-echart'></div>
                    </nz-tab>
                  </nz-tabset>
                </nz-tab>
                <nz-tab nzTitle='设备运行统计'>
                  <inspection-index-pie></inspection-index-pie>
                </nz-tab>
                <nz-tab nzTitle='视频监控'>
                  <inspection-index-cctv></inspection-index-cctv>
                </nz-tab>
            </nz-tabset>
        </div>
  `
})
export class InspectionComponent implements OnInit {
  constructor(private fb: FormBuilder) { }
  index_form!: FormGroup
  indexFormSubmit(): void {
    if (this.index_form.value)
      console.log(this.index_form.value)
  }
  option1 = {
    color: ['#ffff00'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      show: true,
      bottom: '0',
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: '8%',
      right: '6%',
      bottom: '6%',
      containLabel: true,
      borderColor: '#fff',
      borderWidth: 1
    },
    xAxis: [
      {
        type: 'category',
        data: ['光达', '火车南站', '沙湾公园', '长沙大道', '人民东路', '锦泰广场', '长沙火车站'],
        axisTick: {
          alignWithLabel: true,
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '##434454'
          }
        },
        axisLabel: {
          color: '#ffffff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#363742'
          }
        },
        axisLabel: {

          color: '#ffffff'

        }
      }
    ],
    series: [
      {
        name: '报警统计',
        type: 'bar',
        barWidth: '30%',
        data: [120, 132, 101, 134, 90, 230, 210]
      }
    ]
  };
  option2 = {
    color: ['#c23531'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      show: true,
      bottom: '0',
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: '8%',
      right: '6%',
      bottom: '6%',
      containLabel: true,
      borderColor: '#fff',
      borderWidth: 1
    },
    xAxis: [
      {
        type: 'category',
        data:
          ['2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05', '2021-01-06', '2021-01-07'],
        axisTick: {
          alignWithLabel: true,
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '##434454'
          }
        },
        axisLabel: {
          color: '#ffffff'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#363742'
          }
        },
        axisLabel: {

          color: '#ffffff'

        }
      }
    ],
    series: [
      {
        name: '报警统计',
        type: 'bar',
        barWidth: '30%',
        data: [20, 32, 10, 14, 9, 30, 10]
      }
    ]
  }
  ngOnInit(): void {
    this.index_form = this.fb.group({
      line: [null],
      date: [null],
      cycle: ["day"]
    })
  }

}
